{__NOLAYOUT__}
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>统计-{$seo_title}</title>
    <include file="Index:meta" />
</head>

<body>
    <div id="page">
        <!-- Header -->
        <include file="Index:header" />
        <!-- Header End -->

        <div class="banner hide-sm">
            <img src="__PUBLIC__/dist/image/rank_banner.jpg">
        </div>

        <!-- 项目列表 start -->
        <div class="project container">
            <h2 class="mb-40">数据信息</h2>
            <section class="count-box clearfix">
                <ul>
                    <li>
                        <i class="icon-count-gw"></i>
                        <p>岗位数：{$data.gangwei}</p>
                    </li>
                    <li>
                        <i class="icon-count-xm"></i>
                        <p>项目数：{$data.xiangmu}</p>
                    </li>
                    <li>
                        <i class="icon-count-rw"></i>
                        <p>任务数：{$data.renwu}</p>
                    </li>
                    <li>
                        <i class="icon-count-wk"></i>
                        <p>微课数：{$data.weike}</p>
                    </li>
                    <li>
                        <i class="icon-count-user"></i>
                        <p>会员数：{$data.user}</p>
                    </li>
                    <li>
                        <i class="icon-count-fw"></i>
                        <p>访问量：{$data.fangwei}</p>
                    </li>
                </ul>
            </section>
            <h2 class="pt-60 mb-40">访问统计</h2>
            <div class="echarts-box">
                <section id="hy" style="width:1180px;height:300px;"></section>
            </div>
            <div class="echarts-box">
                <section id="fw" class="pt-40 mb-40" style="width:1180px;height:300px;"></section>
            </div>
            <h2 class="pt-60 mb-40">专业-岗位统计</h2>
            <div class="major-list mb-20">
                <volist name='zhuanye' id='vo' key='k'>
                    <a data-zid='{$vo.id}' <if condition="$k eq '1' "> class="active" </if> >{$vo.title}</a>
                </volist>
            </div>
            <div class="major-list-li mb-40">
                
            </div>
            
            <div class="echarts-box">
                <section id="major-hy" style="width:1180px;height:300px;"></section>
            </div>
            <div class="echarts-box">
                <section id="major-fw" class="pt-40 mb-40" style="width:1180px;height:300px;"></section>
            </div>
        </div>

        <include file="Index:footer" />
    </div>
    <i class="goTop"></i>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/echarts/4.1.0.rc2/echarts.min.js"></script>

    <script type="text/javascript">
        $(function () {
        //专业点击事件
        $(".major-list a").on("click", function () {
                var zid = $(this).data('zid');
                $(".major-list a").removeClass("active");
                $(this).addClass("active");
                setgwlist(zid) ;

            })
        //岗位点击事件
        $(".major-list-li").on("click",'a', function () {
                var gwid = $(this).data('gwid');
                $(".major-list-li a").removeClass("active");
                $(this).addClass("active");
                var gwzyid = $(".major-list .active").data('zid');
                getgwstatis(gwid,gwzyid) ;

        })    
        //获取岗位列表    
        function setgwlist(aa){
            $.ajax({
            type: "POST",
            url: "index.php?g=Home&m=Index&a=getgangwei",
            data: "zid=" + aa,
            dataType: "json",
            success: function (resp) {
            if (resp != null) {
                var strHTML = '<a class="active" data-gwid="all" >全部</a>';
                $.each(resp , function (k, item) {  
                    strHTML += '<a  data-gwid='+item.id+' >'+item.title+'</a>'; 
                });
                $(".major-list-li").html(strHTML) ;
            }
           getgwstatis('all',aa) ;
            }
          }); 
        }
        var cc = $(".major-list .active").data('zid');
        setgwlist(cc) ; 
        //获取岗位统计数据    
        function getgwstatis(hh,jj){
            $.ajax({
            type: "POST",
            url: "index.php?g=Home&m=Index&a=getgwdata",
            data: "gwid=" + hh +"&zyid=" + jj,
            dataType: "json",
            success: function (resp) {
            if (resp != null) {
                      var myChart3 = echarts.init(document.getElementById('major-hy'));
        var option3 = {
            tooltip: {
                formatter: '{b0} <br />{c0}',
            },
            color: ['#3398DB'],
            backgroundColor: "#fff",
            grid: [
                {top: 50,bottom: 40,right:"30px",left:"80px"},
            ],
            xAxis : [
                {
                    type : 'category',
                    data : resp.gsriqi,
                    axisTick: {
                        alignWithLabel: true
                    }
                }
            ],
            yAxis : [
                {
                    name:'用户活跃数（个）',
                    type : 'value'
                }
            ],
            series : [
                {
                    type:'bar',
                    barWidth: '60%',
                    data:resp.gwactive ,
                }
            ]
        };
        myChart3.setOption(option3);


        var myChart4 = echarts.init(document.getElementById('major-fw'));
        var option4 = {
            backgroundColor: "#fff",
            grid: [
                {top: 50,bottom: 40,right:"30px",left:"80px"},
            ],
            tooltip: {
                formatter: '{b0} <br />访问量：<strong>{c0}</strong>次',
            },
            xAxis: {
                type: 'category',
                boundaryGap: false,
                data: resp.gsriqi,
                splitLine: {
                    show: true
                }
            },
            yAxis: {
                name: "每天访问量（次）",
                type: 'value',
            },
            series: [{
                data: resp.gwbrower,
                type: 'line',
            }]
        };
        myChart4.setOption(option4);
               
            }
            }
          }); 
        }
        
    })
          
         
        var myChart = echarts.init(document.getElementById('hy'));
        var option = {
            tooltip: {
                formatter: '{b0} <br />{c0}',
            },
            color: ['#3398DB'],
            backgroundColor: "#fff",
            grid: [
                {top: 50,bottom: 40,right:"30px",left:"80px"},
            ],
            tooltip: {
                trigger: 'axis',
                axisPointer: {            // 坐标轴指示器，坐标轴触发有效
                    type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
                }
            },
            xAxis: [
                {
                    type: 'category',
                    data: {$data.gsriqi},
                    axisTick: {
                        alignWithLabel: true
                    }
                }
            ],
            yAxis: [
                {
                    name: '用户活跃数（个）',
                    type: 'value'
                }
            ],
            series: [
                {
                    type: 'bar',
                    barWidth: '60%',
                    data: {$data.huoyue},
                }
            ]
        };
        myChart.setOption(option);


        var myChart2 = echarts.init(document.getElementById('fw'));
        var option2 = {
            tooltip: {
                formatter: '{b0} <br />访问量：<strong>{c0}</strong>次',
            },
            backgroundColor: "#fff",
            grid: [
                {top: 50,bottom: 40,right:"30px",left:"80px"},
            ],
            xAxis: {
                type: 'category',
                boundaryGap: false,
                data: {$data.gsriqi},
                splitLine: {
                    show: true
                }
            },
            yAxis: {
                name: "每天访问量（次）",
                type: 'value',
            },
            series: [{
                data: {$data.brower},
                type: 'line',
            }]
        };
        myChart2.setOption(option2);

//        var myChart3 = echarts.init(document.getElementById('major-hy'));
//        var option3 = {
//            tooltip: {
//                formatter: '{b0} <br />{c0}',
//            },
//            color: ['#3398DB'],
//            backgroundColor: "#fff",
//            grid: [
//                {top: 50,bottom: 40,right:"30px",left:"80px"},
//            ],
//            xAxis : [
//                {
//                    type : 'category',
//                    data : ['05-06', '05-07', '05-08', '05-09', '05-010', '05-11', '05-12'],
//                    axisTick: {
//                        alignWithLabel: true
//                    }
//                }
//            ],
//            yAxis : [
//                {
//                    name:'用户活跃数（个）',
//                    type : 'value'
//                }
//            ],
//            series : [
//                {
//                    type:'bar',
//                    barWidth: '60%',
//                    data:[10, 52, 200, 160, 170, 120, 220]
//                }
//            ]
//        };
//        myChart3.setOption(option3);
//
//
//        var myChart4 = echarts.init(document.getElementById('major-fw'));
//        var option4 = {
//            backgroundColor: "#fff",
//            grid: [
//                {top: 50,bottom: 40,right:"30px",left:"80px"},
//            ],
//            tooltip: {
//                formatter: '{b0} <br />访问量：<strong>{c0}</strong>次',
//            },
//            xAxis: {
//                type: 'category',
//                boundaryGap: false,
//                data: ['05-06', '05-07', '05-08', '05-09', '05-010', '05-11', '05-12'],
//                splitLine: {
//                    show: true
//                }
//            },
//            yAxis: {
//                name: "每天访问量（次）",
//                type: 'value',
//            },
//            series: [{
//                data: [820, 932, 901, 934, 1290, 1330, 1320],
//                type: 'line',
//            }]
//        };
//        myChart4.setOption(option4);
//        var option5 = {
//            series: [{
//                data: [820, 932, 901, 934, 1290, 1330, 1320],
//            },
//            xAxis: {
//                data: ['05-06', '05-07', '05-08', '05-09', '05-010', '05-11', '05-12'],
//            },
//        }
//        myChart4.setOption(option5);
    </script>
</body>

</html>